<script setup>
import router from "../modules/router.js";
import {topicQueryArticleQueryById} from "@/api/api.js";
import {onMounted, ref} from "vue";
import {showImagePreview} from "vant";
import jing from "@/assets/jing.png";
const contentCard =
    "那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。";
// let props = defineProps(["item"]);
console.log(router.currentRoute.value.query.id);
let detailData = ref({})
let userInfo = ref({})
let talkImages = ref([])
let latestLikes = ref([])
let showComments = ref([])
let hashtags = ref([])
let talkFiles = ref([])
let talkText = ref('')
const getTopicQueryArticleQueryById = () => {
  topicQueryArticleQueryById(router.currentRoute.value.query.id).then(res => {
    console.log(res)
    detailData.value = res.result
    userInfo.value = JSON.parse(detailData.value.talkOwner)
    talkImages.value = []
    talkImages.value = JSON.parse(detailData.value.talkImages)
    latestLikes.value = JSON.parse(detailData.value.latestLikes)
    showComments.value = JSON.parse(detailData.value.showComments)
    hashtags.value = JSON.parse(detailData.value.hashtags)
    talkFiles.value = JSON.parse(detailData.value.talkFiles)
    talkText.value = detailData.value.talkText
    console.log(talkText.value)
  })
}

onMounted(() => {
  getTopicQueryArticleQueryById()
})
const showImage = (index) => {
  showImagePreview({
    images: talkImages,
    startPosition: index
  })
}
const toTag = (val) => {
  router.push({
    path: "/tagPage",
    query: {
      tag: val
    }
  })
}


const isExpanded = ref(false)

function toggle() {
  isExpanded.value = !isExpanded.value
}
</script>

<template>
  <van-sticky>
    <div class="header">
      <van-icon name="arrow-left" size="25" @click="router.back()"/>
<!--      <div class="timeBox" @click="show = true">-->
<!--        <div class="time">{{ time }}</div>-->
<!--        <div class="iconTime">-->
<!--          <van-icon name="notes-o" size="18"/>-->
<!--        </div>-->
<!--      </div>-->
<!--      <van-switch v-model="checked" @change="checkedChange">-->
<!--        <template #node>-->
<!--          <div class="icon-wrapper">-->
<!--            <van-icon-->
<!--                :name="-->
<!--              checked-->
<!--                ? jing-->
<!--                : ''-->
<!--            "-->
<!--            ></van-icon>-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-switch>-->
    </div>
  </van-sticky>
  <div class="content-card">
    <van-row>
      <van-col>
        <van-image
            style="margin-right: 10px"
            round
            width="40"
            height="40"
            :src="detailData.userHeadimg"
        />
      </van-col>
      <van-col>
        <div style="color: #9ba5bd; font-size: 18px;height: 20px">{{ userInfo.name }}</div>

        <div style="color: #999999; font-size: 14px">{{ detailData.createTime }}</div>
      </van-col>
    </van-row>
    <div class="contentBox">
      <div class="ellipsis-box" v-if="talkText.length > 65">
        <div v-if="!isExpanded" v-html="talkText" class="ellipsis"></div>
        <div v-else v-html="talkText" style="white-space: pre-wrap;"></div>

        <van-button type="primary" @click="toggle" size="mini">{{ isExpanded ? '收起' : '展开' }}</van-button>
      </div>

      <div>
        <van-image
            v-for="(item, index) in talkImages"
            @click="showImage(index)"
            :key="index"
            style="margin-right: 10px"
            width="130px"
            height="150px"
            fit="cover"
            :src="item"
        />
        <div  v-for="(item, index) in talkFiles" :key="index">
          <div class="inline-flex" v-if="['pdf'].includes(item.split('.').pop())" >
            <img src="../assets/pad.png" alt="" width="30" height="30">
            <div class="ml-2 flex-1 text-gray-500" @click="window.open(item, '_blank')">
              {{ item.match(/\/([^\/]+)$/)[1] }}
            </div>
          </div>
        </div>
      </div>
      <van-tag v-for="(item, index) in hashtags" :key="index" plain type="primary" @click="toTag(item)" class="h-tag">
        {{ item }}
      </van-tag>
      <div>
        <van-icon
            name="good-job"
        />
        <span v-for="(item, index) in latestLikes" :key="index" style="margin:0px 5px 0px 0px;">{{ item.owner.name }}</span>
      </div>
      <div>
        <div v-for="(item, index) in showComments" :key="index">
            <span style="color: #1989fa">{{ item.owner.name }}</span
            >：{{ item.text }}
        </div>
      </div>
<!--      <div style="color: #1989fa">查看更多评论</div>-->
    </div>
  </div>
</template>


<style scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: pre-wrap;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid #cfcfcf;
  background: #ffffff;
  width: 837px;
  margin: auto;
  border-radius: 10px;
}
.content-card {
  margin: 10px 5px;
  padding: 10px 10px;
  background: white;
  border-radius: 8px;
  max-width: 837px;
  margin:auto;
}

.van-button--primary {
  color: var(--van-button-primary-color);
  background: #107459;
  border: var(--van-button-border-width) solid var(--van-button-primary-border-color);
}

.van-switch--on {
  background: #107459;
}
</style>
